<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}">
</head>
<body>
<div th:replace="~{/common/header::header-body}"></div>


<div class="container mt-3 text-justify-center">

    <table class="table table-bordered">
        <thead>
        <tr>
            <th>文章标题</th>
            <th>创建时间</th>
            <th>分类标签</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="article:${articles}">
            <td th:text="${article.getTitle()}">1</td>
            <td th:text="${#dates.format(article.getDate())}">2</td>
            <td th:text="${article.getCategory()}">3</td>
            <!--            <td th:text="${article.getContent()}"></td>-->
            <td>
                <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
                        aria-expanded="false">详情
                </button>

                <ul class="dropdown-menu">
                    <li th:text="${article.getTitle()}"></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li th:text="${article.getContent()}"></li>
                </ul>

                <a th:href="@{'/back/article/edit/'+${article.getId()}}">
                    <button type="button" class="btn btn-primary">修改</button>
                </a>
                <button type="button" class="btn btn-danger" th:onclick="deleteArtcile([[${article.getId()}]])">删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>


</body>
<script>
    function deleteArtcile(id) {
        if (confirm("确认删除？")) {
            location.replace(location.protocol + "//" + location.host + "/back/article/delete/" + id);
        }
    }

</script>
</html>